<template>
  <div class="app-container">
    
    <el-breadcrumb separator="/">
        <el-breadcrumb-item class="active" >
            <span @click="changeBread();search()">查看一级分类</span>
        </el-breadcrumb-item>
        <!-- <el-breadcrumb-item v-for="(item,index) in breadArr">
            <span @click="changeBread(item,index);search()">{{item.name}}</span>
        </el-breadcrumb-item> -->
       
     </el-breadcrumb>
    
    <br/>
      <el-button type="success" icon="el-icon-plus" @click="dialogFormVisible=true;">添加类目</el-button>


    <el-table :data="catList" style="width: 100%" ref="brandTable">
      <el-table-column type="selection"> </el-table-column>

      <el-table-column prop="cid" label="分类ID" />
      <el-table-column prop="name" label="类目名称" width="200" />
      <el-table-column prop="tid" label="模板ID" />
      <el-table-column prop="tname" label="模板名称" />
      <el-table-column prop="brands" label="关联品牌" >
            <template slot-scope="scope">

                  <div>{{scope.row.brands|jsonFormat('name')}}</div>

            </template>

      </el-table-column>
      <el-table-column prop="spec" label="关联规格" >

                <template slot-scope="scope">

                  <div>{{scope.row.spec|jsonFormat('specName')}}</div>

            </template>


      </el-table-column>
      <el-table-column label="操作"  width="300">
        <template slot-scope="scope">
          <!-- 自定义展示 -->
          <div>
            <el-button size="mini" type="primary" @click="breadArr.push(scope.row);findChild(scope.row.cid)">查看下级分类</el-button>
            <el-button
              type="primary"
                size="mini"
              icon="el-icon-edit"
              >修改</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>

     <br />

    <el-pagination
      style="float: right"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="searchMap.page"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="5"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

<!-- 添加类目dialog -->
    <el-dialog :title="类目编辑" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
        
          
        <el-form :model="entity" :rules="rules" ref="brandForm">
           
            <el-form-item label="父类目">
                  <el-breadcrumb separator="/">
                    <el-breadcrumb-item class="active" >
                        <span >一级分类</span>
                    </el-breadcrumb-item>
                    <!-- <el-breadcrumb-item v-for="(item,index) in breadArr">
                        <span>{{item.name}}</span>
                    </el-breadcrumb-item> -->
                  
                </el-breadcrumb>
            </el-form-item>

            <el-form-item label="类目名称"  prop="name" label-width="100px">
            <el-input v-model="entity.name" ></el-input>
            </el-form-item>
             <el-form-item label="选择模板" label-width="100px">
                  <el-select v-model="entity.templateId" placeholder="请选择">
                    <el-option
                      v-for="item in tmpls"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
            </el-form-item>
           
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="save()">确 定</el-button>
        </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  
  data() {
    return {

        catList:[],
        searchMap:{
             page:1,
             limit:5,
             data:0    //data就是parent_id  ,默认查一级商品分类
        },
        total:0 ,//总记录数   
        breadArr:[], //面包屑数组
        dialogFormVisible:false,
        entity:{parentId:0}, //要保存的商品分类
        tmpls:[] // 模板列表

    };
  },
  methods:{
     
  },
  created(){
     
  },
 
};
</script>

<style lang="scss">

</style>